<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>首页 </title>
    <link type="text/css" href="CSS/base.css" rel="stylesheet"/>
    <link type="text/css" href="frozenui-1.3.0/css/basic.css" rel="stylesheet"/>
    <link type="text/css" href="frozenui-1.3.0/css/frozen.css" rel="stylesheet" />
    <link type="text/css" href="CSS/styles.css" rel="stylesheet"/>
    <link type="text/css" href="CSS/index.css" rel="stylesheet">
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=37342703" charset="UTF-8"></script>
    <script type="text/javascript" src="frozenui-1.3.0/lib/zepto.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="frozenui-1.3.0/js/frozen.js"></script>
    <script type="text/javascript">
        $('.ui-searchbar').tap(function(){
            $('.ui-searchbar-wrap').addClass('focus');
            $('.ui-searchbar-input input').focus();
        });
        $('.ui-searchbar-cancel').tap(function(){
            $('.ui-searchbar-wrap').removeClass('focus');
        });

    </script>

</head>
<body>
<section class="index-search">
    <div class="ui-searchbar-wrap ui-border-b" style="width: 98%;margin: 0 auto;padding:0 5px;">
        北京 <i class="ui-icon-unfold"></i>
        <div class="ui-searchbar ui-border-radius" style="margin: 0;padding:0 10px;border-radius: 10px;">
            <i class="ui-icon-search"></i>
            <div class="ui-searchbar-text">请输入目的地/风景/酒店</div>
            <div class="ui-searchbar-input"><input value="" type="tel" placeholder="请输入目的地/风景/酒店" autocapitalize="off"></div>
            <i class="ui-icon-close"></i>
        </div>
        <button class="ui-searchbar-cancel">取消</button>
        <i class="ui-icon-commented"></i>
    </div>
</section>

<!-- <script src="http://i.gtimg.cn/vipstyle/frozenjs/1.0.1/frozen.js?_bid=304"></script> -->
<section>
    <div class="ui-slider">
        <ul class="ui-slider-content" style="width: 300%">
            <li><span style="background-image:url(http://placeholder.qiniudn.com/640x200)"></span></li>
            <li><span style="background-image:url(http://placeholder.qiniudn.com/640x200)"></span></li>
            <li><span style="background-image:url(http://placeholder.qiniudn.com/640x200)"></span></li>
        </ul>
    </div>

    <div class="box">
        <p></p>
        <p></p>
    </div>
    <div class="box2">
        <div ></div>
        <div class="myvertical" >
            <p></p>
            <p></p>
        </div>
        <div ></div>
    </div>
    <div class="box last">
        <p></p>
        <p></p>
    </div>
</section>

<footer class="ui-footer ui-footer-btn">
    <ul class="ui-tiled ui-border-t">
        <li data-href="index.html" class="ui-border-r active"><a href="index.html">首页</a></li>
        <li data-href="ui.html" class="ui-border-r "><a href="trip.html">行程</a></li>
        <li data-href="ui.html" class="ui-border-r "><a href="find.html">发现</a></li>
        <li data-href="js.html" class=""><a href="login.html">我的</a></li>
    </ul>
</footer>
</body>
</html>
<script>
    (function (){
        var slider = new fz.Scroll('.ui-slider', {
            role: 'slider',
            indicator: true,
            autoplay: true,
            interval: 3000
        });

        slider.on('beforeScrollStart', function(fromIndex, toIndex) {
            console.log(fromIndex,toIndex)
        });

        slider.on('scrollEnd', function(cruPage) {
            console.log(cruPage)
        });
    })();
</script>